<template>
  <header>
    <h1>{{ title }}</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'HeaderPage',
  data() {
    return {
      title: 'Vue Demo Project',
    };
  },
};
</script>

<style scoped>
header {
  background-color: #42b983;
  padding: 1rem;
  color: white;
}
nav a {
  color: white;
  text-decoration: none;
  margin-right: 10px;
}
</style>
